<template>
  <div class="loginPage">
    <el-form
      ref="loginDom"
      :rules="rules"
      :model="userAccount"
      class="demo-form-inline"
    >
      <el-form-item prop="userName" label="UserName:" class="item">
        <el-input v-model="userAccount.userName" />
      </el-form-item>
      <el-form-item prop="passWord" label="PassWord:" class="item">
        <el-input
          type="password"
          show-password
          v-model="userAccount.passWord"
        />
      </el-form-item>
      <el-form-item class="btnForm">
        <div>
          <el-button class="btn" type="primary" @click="onSubmit"
            >登录</el-button
          >
          <el-button class="btn" @click="resetForm">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import "@/utils/loginbg";
import { userLogin } from "@/api/user";
import router from "@/router";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const loginDom = ref();
let userAccount = reactive({
  userName: "",
  passWord: "",
});
const rules = {
  userName: [
    {
      required: true,
      message: "该字段必填",
    },
    {
      pattern: /[a-zA-Z]\w{3,7}/,
      message: "用户名由4-8位英文字母数字下划线组成首字符必须英文",
    },
  ],
  passWord: [
    {
      required: true,
      message: "该字段必填",
    },
  ],
};

if (localStorage.getItem("account")) {
  userAccount = JSON.parse(localStorage.getItem("account") as string);
}
console.log(userAccount);
const storageInfo = (res: any) => {
  ElMessage({
    message: "登录成功！",
    type: "success",
  });
  localStorage.setItem("userInfo", JSON.stringify(res.data.data.userInfo));
  localStorage.setItem("token", JSON.stringify(res.data.data.token));
  router.replace("/");
};
const onSubmit = () => {
  console.log(loginDom);
  loginDom.value.validate((valid: any) => {
    if (valid) {
      userLogin(userAccount).then((res) => {
        if (res.data.code === 200) {
          if (!localStorage.getItem("account")) {
            localStorage.setItem("account", JSON.stringify(userAccount));
          }
          storageInfo(res);
        } else {
          ElMessage({
            message: "登录失败！",
            type: "error",
          });
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const resetForm = () => {
  console.log(111);
  loginDom.value.resetFields();
};
</script>

<style scoped lang="scss">
.loginPage {
  display: flex;
  height: 100vh;
  font-weight: 900;
  background-image: url(@/assets/bg.jpg);
  background-size: cover;
  .el-form {
    width: 400px;
    margin: auto;
    padding: 50px 100px 20px 100px;
    border-radius: 50px;
    background-color: rgba(52, 193, 201, 0.5);
    .el-form-item {
      margin: 40px auto;
      .btn {
        width: 100px;
        margin-left: 60px;
      }
      :deep(.el-form-item__label) {
        width: 100px;
        color: rgb(22, 27, 27);
      }
    }
  }
}
</style>
